<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="header w15">
      <div class="w">
        <div class="header_container">
          <div class="left">
            <img src="./image/1.png" alt="" />
          </div>
          <div class="right">
            <form action="">
              <input type="text" />
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="nav w15">
      <div class="nav_container w">
        <div class="left">
          <a href="#">首页</a>
          <span class="gap"></span>
          <a href="#">景观</a>
          <span class="gap"></span>
          <a href="#">谈资</a>
          <span class="gap"></span>
          <a href="#">作者</a>
          <span class="gap"></span>
          <a href="#">大讲堂</a>
          <span class="gap"></span>
          <a href="#">活动</a>
          <span class="gap"></span>
          <a href="#">商城</a>
        </div>
        <div class="right">
          <a href="">APP</a>
          <span class="gap"></span>
          <a href="">投稿</a>
          <span class="gap"></span>
          <a href="">登录</a>
        </div>
      </div>
    </div>
    <div class="content w15">
      <div class="w">
        <div class="view">
          <div class="left">
            <div class="hearder">
              <span style="color: #fff; font-size: 18px">景观</span>
              <span style="font-size: 14px; color: #aaa">LANDSCAPE</span>
            </div>
            <div class="bottom">
              <div class="item">
                <a href="#">大自然</a>
                <a href="#">大自然</a>
              </div>
              <div class="item">
                <a href="#">大自然</a>
                <a href="#">大自然</a>
              </div>
              <div class="item">
                <a href="#">大自然</a>
                <a href="#">大自然</a>
              </div>
              <div class="item">
                <a href="#">大自然</a>
                <a href="#">大自然</a>
              </div>
              <div class="item">
                <a href="#">大自然</a>
                <a href="#">大自然</a>
              </div>
              <div class="item">
                <a href="#">大自然</a>
                <a href="#">大自然</a>
              </div>
              <div class="item">
                <a href="#">大自然</a>
                <a href="#">大自然</a>
              </div>
              <div class="item">
                <a href="#">大自然</a>
                <a href="#">大自然</a>
              </div>
              <div class="item">
                <a href="#">大自然</a>
                <a href="#">大自然</a>
              </div>
              <div class="item">
                <a href="#">大自然</a>
                <a href="#">大自然</a>
              </div>
              <div class="item">
                <a href="#">大自然</a>
                <a href="#">大自然</a>
              </div>
              <div class="item">
                <a href="#">大自然</a>
                <a href="#">大自然</a>
              </div>
              <div class="item">
                <a href="#">大自然</a>
                <a href="#">大自然</a>
              </div>
              <div class="item">
                <a href="#">大自然</a>
                <a href="#">大自然</a>
              </div>
              <div class="item">
                <a href="#">大自然</a>
                <a href="#">大自然</a>
              </div>
              <div class="item">
                <a href="#">大自然</a>
                <a href="#">大自然</a>
              </div>
            </div>
          </div>
          <div class="content">
            <ul class="imgLeft">
              <li>
                <img style="width: 362px; height: 204px" src="./image/2.jpg" alt="" />
              </li>
              <li>
                <img style="width: 362px; height: 204px" src="./image/2.jpg" alt="" />
              </li>
              <li>
                <img style="width: 362px; height: 204px" src="./image/2.jpg" alt="" />
              </li>
            </ul>
            <ul class="imgRight">
              <li>
                <img style="width: 362px; height: 204px !important" src="./image/2.jpg" alt="" />
              </li>
              <li>
                <img style="width: 362px; height: 400px" src="./image/3.jpg" alt="" />
              </li>
            </ul>
          </div>
          <div class="right">
            <div class="right_container">
              <div class="tap1">
                <h2>杂志</h2>
                <div class="item">
                  <a href="#">
                    <img src="./image/4.jpg" alt="" />
                  </a>
                  <a href="#">
                    <img src="./image/4.jpg" alt="" />
                  </a>
                  <a href="#">
                    <img src="./image/4.jpg" alt="" />
                  </a>
                </div>
              </div>
              <div class="tap2">
                <h2 style="font-size: 18px; text-align: center; background-color: #333; font-weight: 400 !important">中国国家地理微信公众平台</h2>
                <div class="function">
                  <div class="item">
                    <img src="./image/2.png" alt="" />
                    <span>订阅号</span>
                  </div>
                  <div class="item">
                    <img src="./image/2.png" alt="" />
                    <span>服务号</span>
                  </div>
                </div>
                <div class="bottom">
                  <p>使用微信扫描二维码进行关注，或微信中</p>
                  <p>搜索“中国国家地理”关注。</p>
                </div>
              </div>
              <div class="tap3">
                <h2>活动</h2>
                <div class="item">
                  <img src="./image/6.jpg" alt="" />
                  <img src="./image/6.jpg" alt="" />
                  <img src="./image/6.jpg" alt="" />
                  <img src="./image/6.jpg" alt="" />
                </div>
              </div>
              <div class="tap3">
                <h2>活动</h2>
                <div class="item">
                  <img src="./image/6.jpg" alt="" />
                  <img src="./image/6.jpg" alt="" />
                  <img src="./image/6.jpg" alt="" />
                  <img src="./image/6.jpg" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="kongbai"></div>
        <div class="write">
          <div class="left">
            <div class="hearder">
              <span style="color: #fff; font-size: 18px">征稿</span>
              <span style="font-size: 14px; color: #aaa">CONTRIBUTIONS</span>
            </div>
          </div>
          <div class="write_content">
            <div class="item">
              <div class="top">
                <h3>极简</h3>
                <span>投稿</span>
              </div>
              <img src="./image/5.jpg" alt="" />
            </div>
            <div class="item">
              <div class="top">
                <h3>美食</h3>
                <span>投稿</span>
              </div>
              <img src="./image/5.jpg" alt="" />
            </div>
            <div class="item">
              <div class="top">
                <h3>烟 雾 | 视角征集</h3>
                <span>投稿</span>
              </div>
              <img src="./image/5.jpg" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer w15">
      <div class="w">
        <div class="footer_container">
          <ul class="first_ul">
            <li>
              <h2>杂志</h2>
              <ul>
                <li>
                  <a href="#">
                    <h3>中国国家地理</h3>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>中华遗产</h3>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>博物</h3>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>杂志订阅</h3>
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <h2>新媒体</h2>
              <ul>
                <li>
                  <a href="#">
                    <h3>中国国家地理网</h3>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>中国国家地理官方客户端</h3>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>官方微信</h3>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>官方微博</h3>
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <h2>广告合作</h2>
              <ul>
                <li>
                  <a href="#">
                    <h3>杂志广告刊例</h3>
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <h2>关于我们</h2>
              <ul>
                <li>
                  <a href="#">
                    <h3>中国国家地理网</h3>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>中国国家地理官方客户端</h3>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>官方微信</h3>
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <h2>关于网站</h2>
              <ul>
                <li>
                  <a href="#">
                    <h3>中国国家地理网</h3>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>中国国家地理官方客户端</h3>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>官方微信</h3>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>中国国家地理网</h3>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>中国国家地理官方客户端</h3>
                  </a>
                </li>
              </ul>
            </li>
          </ul>
          <div class="footer_bottom">
            <div class="top">
              <div class="item">
                <img src="./image/1.png" alt="" />
                <div class="tubiao">
                  <div class="wx i1"></div>
                  <div class="wb i2"></div>
                  <div class="ff i3"></div>
                  <div class="fg i4"></div>
                  <div class="mm i5"></div>
                </div>
              </div>
              <div class="item">
                <img src="./image/2.png" alt="" />
                <span>订阅号</span>
              </div>
              <div class="item">
                <img src="./image/2.png" alt="" />
                <span>服务号</span>
              </div>
            </div>
            <div class="bottom">
              <p>Copyright © 2001-2017 Chinese National Geography Press. All rights reserved.</p>
              <p class="lianjie">
                优秀科普网站
                <a href="#">京ICP证090072号</a>
                <a href="#">京ICP备10014304号-4</a>
                <a href="#">京ICP备10014304号-5</a>
                <a href="#"> 京公网安备11010502048871</a>
                <span> 新出网证（京）字 049号 </span>
                <a href="#">出版物经营许可证</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
